<template>
    <Modal
            v-model="modelShow"
            width="700"
            title="批量导入图片"
            :mask-closable="false"
    >
        <div class="readme">特别说明：
            <p class="readme-text">1.如果不能选择文件夹请使用Chrome浏览器</p>
            <p class="readme-text">2.请选择根目录文件夹,文件夹下面只能是类别文件夹</p>
            <p class="readme-text">3.保存后导入的图片会覆盖掉原来的图片</p>
        </div>
        <wl-dir-upload
                ref="wlDirUpload"
                :dirCheckFun="dirCheckFun"
                :fileNameCheckFun="dirNameFun"
                :tableMaxHeight="600"
                :format="formatData"
                :maxSize="2"
                :helpInfo="helpInfo"
                uploadType="hadoop"
                :rootDir="getRootDir"
                @upAllImgOver="upAllImgOverAction"
                :uploadUrl="getUploadUrl"
        ></wl-dir-upload>
        <div slot="footer">
            <Button type="error" @click="cancelAction">取消</Button>
            <Button type="success" :loading="loading" @click="okAction">保存</Button>
        </div>
    </Modal>
</template>

<script>

export default {
  name: 'ImportDirImg',
  data () {
    return {
      modelShow: false,
      message: '',
      value11: '',
      formatData: ['jpeg', 'jpg', 'png'],
      fileList: {},
      tableData: [],
      loading: false,
      helpInfo: '黄色部分为不符合规则的文件，不允许上传，文件夹和文件名称规则不合格的不允许上传，检查正确后重新选择根目录文件夹'
    }
  },
  props: {
    row: {
      type: Object,
      default: () => {
        return {}
      }
    },
    list: {
      type: Array,
      default: () => {
        return []
      }
    },
    rootDir: {
      type: String,
      default: () => {
        return 'wl'
      }
    }
  },
  computed: {
    getUploadUrl () {
      return this.$config.upLoadFileUrl
    },
    getRootDir () {
      let row = this.row
      return row.company_code + '/' + row.idcard
    }
  },
  methods: {
    modelAction () {
      this.modelShow = !this.modelShow
    },
    okAction () {
      this.loading = true
      if (this.tableData.length > 0) {
        // --执行校验工作
        this.tableData.forEach(item => {
          if (item.state !== 9) {
            if (item.state === 10) {
              if (this.fileList[item.dirArr[1]]) {
                this.fileList[item.dirArr[1]].push({ name: item.fileName, path: item.img })
              } else {
                this.fileList[item.dirArr[1]] = [{ name: item.fileName, path: item.img }]
              }
            } else {
              // --TODO处理上传没成功的
            }
          }
        })
        this.loading = false
        this.$emit('result', this.fileList)
        this.modelAction()
      } else {
        this.loading = false
        this.$Message.error('请先点击批量上传！！')
        this.loading = false
      }
      // this.$emit('result', this.filterData)
      // this.modelAction()
    },
    cancelAction () {
      this.modelShow = false
    },
    dirCheckFun (dirArr) {
      if (dirArr.length <= 2) {
        return { errcode: 1001, errmsg: '请删除此文件' }
      }
      if (dirArr.length > 3) {
        return { errcode: 1001, errmsg: '请删除子目录' }
      }
      return { errcode: 0, errmsg: '没有问题' }
    },
    dirNameFun (dirArr, name) {
      let arr2 = name.split('-')
      if (arr2[0].toString().toLowerCase() !== this.row.record_number.toString().toLowerCase()) {
        return { errcode: 1001, errmsg: '请以全宗号' + this.row.record_number + '开头' }
      }
      if (arr2[1] !== this.row.tui_xiu_date) {
        return { errcode: 1001, errmsg: '第二位退休年度必须是' + this.row.tui_xiu_date }
      }
      if (arr2[2] !== this.row.serial_number) {
        return { errcode: 1001, errmsg: '第三位的流水号必须是' + this.row.serial_number }
      }
      // if (this.fileList[dirArr[1]]) {
      //  this.fileList[dirArr[1]].push(name)
      // } else {
      //  this.fileList[dirArr[1]] = [name]
      // }
      return { errcode: 0, errmsg: '没有问题' }
    },
    upAllImgOverAction (data) {
      this.tableData = data
      console.log(data, '上传完毕后执行')
    }
  },
  mounted () {
  },
  watch: {
    modelShow (data) {

    }
  }
}
</script>

<style scoped>
    .readme {
        color: red;
        font-size: 16px;
        padding: 5px;
    }

    .readme-text {
        font-size: 14px;
    }
</style>
